<template>
  <view class="ranklist">
    <view class="tab">
      <text class="title">昨日提现排行榜</text>
      <view class="line"></view>
    </view>
    <view class="phblb">
      <view class="wrap" v-if="hasData == true">
        <view class="phb-item" v-for="item in ranklist" :key="item.headimage">
          <!-- 排序 -->
          <text class="index">{{item.rank_id}}</text>
          <!-- 头像 -->
          <image class="avatar" :src="item.headimage" mode />
          <!-- 昵称 -->
          <text class="nickname">{{ item.nickname }}</text>
          <!-- 提现金额 -->
          <text class="money">
            <text
              class="getmoney"
              style="color: red;margin-right: 10rpx;font-weight: bold;"
            >{{ item.money }}</text>元
          </text>
        </view>
      </view>
      <view class="nothing" v-else>暂无数据</view>
    </view>
    <neil-modal
      :show="showadd1"
      :autoClose="true"
      :showCancel="true"
      @close="closeModal"
      title="请注意"
      @confirm="closeModal"
    >使用本应用，邀请热爱直播的朋友成为抖音主播，您和朋友均可享受收益。</neil-modal>
  </view>
</template>

<script>
import neilModal from "./neil-modal";
export default {
  components: {
    neilModal
  },
  onLoad(option) {
    // 用户通过分享的二维码扫码进入的用户关系绑定
    console.log(option);
    if (option.scene) {
      let qrId = decodeURIComponent(option.scene);
      wx.setStorageSync("ppid", qrId);
    }
    let pid = wx.getStorageSync("ppid");
    console.log(pid == "");
    let bind_status = wx.getStorageSync("is_bind");
    if (bind_status !== 1 && pid !== "") {
      this.$http({
        url: "/api/user/creatRelation",
        data: { pid: pid }
      }).then(res => {
        if (res.code == 1) {
          uni.showToast({
            title: "关系绑定成功",
            icon: "success"
          });
        }
      });
    }

    // 未知状态提示是否已绑定
    // if (bind_status == 1) {
    //   uni.showToast({
    //     title: "您已有上级绑定关系"
    //   });
    // }

    // 通过分享小程序点击小程序卡片进入
    // if (uni.getStorageSync("ppid")) {
    //   let pid = Number(uni.getStorageSync("ppid"));
    //   this.$http({
    //     url: "/api/user/creatRelation",
    //     data: { pid: pid }
    //   }).then(res => {
    //     if (res.code == 401) {
    //       uni.reLaunch({
    //         url: "/pages/authorise/index"
    //       });
    //       return;
    //     }
    //     if (res.code == 1) {
    //       uni.showToast({
    //         title: "关系绑定成功",
    //         icon: "success"
    //       });
    //     }
    //   });
    // }
  },
  data() {
    return {
      hasData: false,
      ranklist: [],
      showadd1: false,
      flag: false
    };
  },
  onShow() {
    this.getRanklist();
  },
  mounted() {
    this.flag = wx.getStorageSync("flag");
    if (this.flag) {
      // 展示模态框
      this.showadd1 = true;
      // 把缓存中的flag改为false
      wx.setStorageSync("flag", false);
    }
  },
  methods: {
    // 获取昨日排行榜数据
    getRanklist() {
      const that = this;
      that
        .$http({
          url: "/api/Rank/yesterList"
        })
        .then(res => {
          // 未登录状态，跳转到授权页
          if (res.code == 401) {
            uni.reLaunch({
              url: "/pages/authorise/index"
            });
            return;
          }
          this.hasData = res.data.length == 0 ? false : true;
          that.ranklist = res.data;
          console.log(that.ranklist);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.ranklist {
  padding: 0 10px;
  .tab {
    // width: 100rpx;
    height: 100rpx;
    text-indent: 20rpx;
    .title {
      font-weight: bold;
      line-height: 100rpx;
      font-size: 40rpx;
    }
    .line {
      width: 20%;
      height: 5rpx;
      background-color: red;
      margin-left: 70rpx;
    }
  }
  .phblb {
    margin-top: 10rpx;
    .phb-item {
      border-bottom: 1rpx solid #cccccc;
      position: relative;
      line-height: 130rpx;
      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50rpx;
        transform: translateY(-50%);
      }
      .nickname {
        margin-left: 180rpx;
        font-weight: bold;
      }
      .money {
        float: right;
      }
    }
  }
}
</style>
